<template>
  <div>
    <div class="bg-white shadow-1">
      <item-top :id="id" @selectSite="selectSite"></item-top>
    </div>
    <div style="margin-top:10px;" class="bg-white shadow-1">
      <q-card>
        <q-tabs
          v-model="tab"
          dense
          class="bg-grey-2 text-teal"
          active-color="primary"
          indicator-color="primary"
          align="left"
          narrow-indicator>
            <q-tab name="site" label="地点视图" />
            <q-tab name="basic" label="基本视图"/>
            <q-tab name="purchase" label="采购视图"/>
            <!-- <q-tab name="sale"  label="销售视图" /> -->
            <!-- <q-tab name="purchase" label="采购视图" /> -->
            <!-- <q-tab name="cost" label="成本视图" /> -->
        </q-tabs>
        <q-tab-panels v-model="tab" animated>
          <q-tab-panel name="basic" style="padding:3px;">
              <!-- 劳动力 -->
              <labor-Commonly :selectSiteId="selectSiteId" v-if="groupId=='757010f1635849ff9de7edaa237a916c'"></labor-Commonly>
              <!-- 工作 -->
              <job-commonly :selectSiteId="selectSiteId" v-else-if="groupId=='10cb4022688b41679c6ee12aff490e60'"></job-commonly>
              <!-- 物料 -->
              <materiel-commonly :selectSiteId="selectSiteId" v-else-if="groupId=='a1c30be238f349cbb9bf5d2daedb52e9'"></materiel-commonly>
              <labor-Commonly :selectSiteId="selectSiteId" v-else></labor-Commonly>
              <!-- 劳动力 -->
              <!-- <labor-Commonly :selectSiteId="selectSiteId" v-else></labor-Commonly> -->
              <!-- unspsc 公共-->
              <unspsc :selectSiteId="selectSiteId"></unspsc>
              <q-separator />
              <!-- 品类 公共-->
              <Category :selectSiteId="selectSiteId"></Category>
              <q-separator />
          </q-tab-panel>
          <q-tab-panel name="site" style="padding:0px;">
            <item-site-view :id="id"></item-site-view>
          </q-tab-panel>
          <q-tab-panel name="purchase" style="padding:0px;">
            <purchase-commly></purchase-commly>
            <source-supply :selectSiteId="selectSiteId"></source-supply>
          </q-tab-panel>
        </q-tab-panels>
      </q-card>
    </div>
  </div>
</template>

<script>
import LaborCommonly from './Labor/Commonly'// 劳动力
import MaterielCommonly from './Materiel/Commonly'// 物料
import JobCommonly from './job/Commonly'// 工作
import ItemSiteView from './ItemSiteView'// 地点视图
import Category from './BasicView/Category' // 公共品类
import Unspsc from './BasicView/Unspsc' // 公共选项UNSPSC
import ItemTop from './ItemTop' // 公共头部
import SourceSupply from './PurchaseView/Source' // 货源关系
import PurchaseCommly from './PurchaseView/Job/purchaseCommly' // 采购视图基本视图
export default {
  components: {
    Category,
    ItemSiteView,
    JobCommonly, // 工作一般数据
    MaterielCommonly, // 物料一般数据
    ItemTop,
    LaborCommonly, // 劳动力一般数据
    Unspsc, // unspsc
    SourceSupply, // 货源关系
    PurchaseCommly// 采购视图的基本视图
  },
  name: 'ItemPreview',
  data () {
    return {
      // 选项卡
      tab: 'site',
      groupId: '',
      // 选择的Id
      selectSiteId: []
    }
  },
  validations: {
  },
  watch: {
    'tab' () {
      if (this.selectSiteId.length === 0) {
        this.tab = 'site'
        this.$q.notify({
          message: '请选择维护地点!',
          color: 'negative',
          icon: 'error_outline',
          position: 'top-right',
          timeout: 3000
        })
      }
    },
    'selectSiteId' () {
      if (this.selectSiteId.length === 0) {
        this.tab = 'site'
        this.$q.notify({
          message: '请选择维护地点!',
          color: 'negative',
          icon: 'error_outline',
          position: 'top-right',
          timeout: 3000
        })
      }
    }
  },
  created () {
    this.id = this.$route.params.id
    if (this.selectSiteId.length === 0) {
      this.tab = 'site'
    }
  },
  methods: {
    selectSite (v) {
      if (v.length === 0) {
        this.selectSiteId = []
        this.groupId = ''
        console.log('1111111111111')
        this.tab = 'site'
        this.$q.notify({
          message: '请选择维护地点!',
          color: 'negative',
          icon: 'error_outline',
          position: 'top-right',
          timeout: 3000
        })
      } else {
        this.selectSiteId = v[0].id
        this.groupId = v[0].groupId
      }
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>
